<template>
	<gui-page :fullPage="true" :isLoading="pageLoading" :apiLoadingStatus="apiLoadingStatus" ref="guipage"
		:customFooter="isHideTabbar">
		<template v-slot:gFixedTop>
			<gui-a-header title="人才列表"></gui-a-header>
			<view class="bgfff">
				<view class="search flex-ac-jb">
					<view class="flex1">
						<gui-search2 :customClass="['bgfff','border']" height="53rpx" placeholder="输入关键字，搜索您想要的"
							placeholderClass="plStyle"></gui-search2>
					</view>
					<button class="saveBtn">筛选</button>
				</view>
				<view class="shai flex-ac-row f20">
					<text class="la">已选条件:</text>
					<view class="label-item colorBlue">行业：互联网</view>
					<view class="label-item colorBlue">职业：技术人员</view>
					<view class="label-item colorBlue">城市：徐州市云龙区、鼓楼区</view>
					<view class="label-item colorBlue">工作性质：全职</view>
					<view class="label-item colorBlue">薪资待遇：5千-1万</view>
					<view class="tool colorRed flex-ac-row">
						<text class="tool-text">清除</text>
						<text class="tool-text">重新筛选</text>
					</view>

				</view>
			</view>
		</template>
		<template v-slot:gBody>
			<view class="list bgfff">
				<view class="deliver-list bgfff" style="padding: 0;">
					<view class="deliver-item gui-flex gui-align-items-start" v-for="(item,index) in 10">
						<view class="photo">
							<gui-image :width="115" :height="115" src="../../static/index/sbg_3.png"
								borderRadius="60rpx" mode="aspectFill"></gui-image>
							<image class="sex_img" src="../../static/image/man.png" mode="widthFix"></image>
						</view>
						<view class="info">
							<view class="f26 c333">
								赵谦孙俪
							</view>
							<view class="f22 stress mt10">
								投递岗位：UI设计师
							</view>
							<view class="f22 c666 mt10">
								投递时间：2023-12-26
							</view>
							<view class="sgin gui-flex">
								<view class="sgin-item">
									28岁
								</view>
								<view class="sgin-item">
									5年经验
								</view>
								<view class="sgin-item">
									硕士
								</view>
								<view class="sgin-item stress-warp">
									考虑机会
								</view>
							</view>
							<view class="btn_pos">
								<button class="show_btn f20 cfff">查看</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-slot:gFooter>
			<!-- 普通模式 -->
			<gui-flex :customClass="['gui-footer', 'gui-footer-border', 'bgfff']" direction="row" :wrap="false"
				alignItems="center" justifyContent="center">
				<view class="gui-footer-icon-buttons" @tap="navChange(0)">
					<image class="tab_icon" v-if="tabIndex != 0" src="@/static/tabbar/index.png" mode="widthFix"></image>
					<image class="tab_icon" v-if="tabIndex == 0" src="@/static/tabbar/index_select.png" mode="widthFix"></image>
					<text :class="[
								tabIndex == 0 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">首页</text>
				</view>
				<view class="gui-footer-icon-buttons" @tap="navChange(1)">
					<image class="tab_icon" v-if="tabIndex != 1" src="@/static/tabbar/talents.png" mode="widthFix"></image>
					<image class="tab_icon" v-if="tabIndex == 1" src="@/static/tabbar/talents_select.png" mode="widthFix"></image>
					<text :class="[
								tabIndex == 1 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">人才</text>
				</view>
				<view class="gui-footer-icon-buttons" @tap="navChange(2)">
					<image class="tab_icon" v-if="tabIndex != 2" src="@/static/tabbar/mine.png" mode="widthFix"></image>
					<image class="tab_icon" v-if="tabIndex == 2" src="@/static/tabbar/mine_select.png" mode="widthFix"></image>
					<text :class="[
								tabIndex == 2 ? 'gui-primary-color' : 'gui-color-gray', 
								'gui-icons', 
								'gui-footer-icon-buttons-text', 
								'gui-block'
							]">公司</text>
				</view>
			</gui-flex>
		</template>
	</gui-page>
</template>

<script setup>
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const guipage = ref(null);
	const $u = reactive(inject('$u'))
	const reload = ()=> {
		setTimeout(() => {
			guipage.value.endReload();
		}, 1000);
	}
	onLoad(() => {})
	const tabIndex = ref(1)
	
	const navChange = (index) => {
		// tabIndex.value = index;
		if(index == 0) {
			$u.to(`/pages/index/index`, 'switchTab')
		}else if(index == 2) {
			$u.to(`/pages/mine/mine`, 'switchTab')
		}
	}
</script>

<style lang="scss">
	.search {
		padding: 28rpx 14rpx 24rpx 36rpx;
	
		.border {
			border: 1px solid #ccc;
		}
	
		.saveBtn {
			width: 97rpx;
			height: 53rpx;
			margin-left: 10rpx;
			font-size: 20rpx;
		}
	}
	
	.shai {
		padding: 20rpx 10rpx 14rpx 36rpx;
	
		.la {
			position: relative;
			top: -4rpx;
		}
	
		.label-item {
			padding: 6rpx 14rpx;
			background: #F5F5F5;
			border-radius: 14rpx;
			margin-left: 10rpx;
			margin-bottom: 10rpx;
		}
	
		.tool {
			position: relative;
			top: -4rpx;
	
			.tool-text {
				position: relative;
				padding: 6rpx 15rpx;
	
				&:last-child::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 1px;
					height: 24rpx;
					background: #D50000;
				}
			}
		}
	}
	
	.list {
		padding: 0 36rpx;
		margin-top: 10rpx;
	}
</style>